<template>
  <div>
    <page-list-layout>
      <template v-slot:one>
        <h2 class="mt-0 yu-titleColor mb-0">{{ store.songDetails?.artist?.name }}</h2>
      </template>
      <template v-slot:two>
        <div class="content ">
          <div class="w-full relative">
            <van-image class="w-full h-80" fit="cover" :src="store.songDetails?.artist?.cover" alt=""/>
            <YuButton class="absolute bottom-5 right-5" v-if="store.songDetails.user"
                      @click="jumpHomePage(store.songDetails.user.userId)">
              <span>个人主页</span>
            </YuButton>
          </div>
          <div class="tab -mt-1">
            <van-tabs v-model:active="store.songTabIndex" @click-tab="tabChange" @rendered="rendered">
              <van-tab
                  :title="info.meta.title"
                  v-for="info in route?.matched[1]?.children"
                  :key="info.name"
              >
                <router-view :name="info.name"></router-view>
              </van-tab>
            </van-tabs>
          </div>
        </div>
      </template>
      <template v-slot:top>
        <similar-singer/>
      </template>
    </page-list-layout>
  </div>
</template>

<script setup>
import PageListLayout from '@/components/PageListLayout/index.vue'
import SimilarSinger from './components/SimilarSinger/index.vue'
import YuButton from '@/components/YuButton/index.vue'

import {useRoute, useRouter} from "vue-router"
import {useStore} from "@/store/index"
import {inject, watch} from "vue";


const router = useRouter()
const route = useRoute()
const store = useStore()


// 获取歌手信息
store.getArtistDetail(route.query.id)

// tab改变时触发
const tabChange = ({title}) => {
  const matched = route.matched // 获取当前路由的父级
  // 对其子级遍历
  matched[1].children.forEach(item => {
    // 获取父级的path
    const parentPath = matched[1].path
    // 当当前tab的title和当前路由的title相同时就跳转
    if (title === item.meta.title) {
      router.replace({
        path: `${parentPath}/${item.path}`,
        query: {
          id: route.query.id
        }
      })
    }
  })
}
// 为了防止刷新之后tab没有对应路由
const rendered = () => {
  // 对其子级遍历
  route.matched[1].children.forEach((item, index) => {
    const parentPath = route.matched[1].path
    const allPath = `${parentPath}/${item.path}` // 将父级path和当前子级path拼接
    // 然后和当前的路由path对比
    if (allPath === route.path) {
      store.songTabIndex = index
    }
  })
}

// 跳转到个人主页
const jumpHomePage = (id) => {
  router.push({
    path: '/user/homepage',
    query: {
      id
    }
  })
}
// 页面级依赖注入不会刷新整个页面
const reloadPage = inject('reloadPage')

// 由于路由跳转同一页面不会刷新但是路由会改变所以监听路由变化使用，依赖注入刷新页面
// TODO:这样导致刷新的时候播放器会暂停(在layout页面中注册依赖注入刷新这样就不会导致播放器暂停播放了)
watch(route, () => {
  reloadPage()
})
</script>

<style scoped lang="scss">
:deep(.van-tabs__nav) {
  background-color: v-bind('store.theme.secondaryBgColor') !important;

  .van-tab {
    color: v-bind('store.theme.textColor');

    &:hover {
      color: v-bind('store.theme.hoverTextColor');
      background-color: v-bind('store.theme.bgColor');
    }
  }

  .van-tab--active {
    color: v-bind('store.theme.hoverTextColor');
    background-color: v-bind('store.theme.bgColor');
  }

  .van-tabs__line {
    background-color: v-bind('store.theme.HoverBgColor');
  }
}
</style>
